<meta charset="UTF-8">
<link rel="stylesheet" href="./font_wn0fq0go65p/iconfont.css">
<link rel="stylesheet" href="./index.css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="root">
    <div class="menu" :style="{width:menuWidth+'px'}">
        <ul>
            <template v-for="(item,i) in liObj">
                <li @click="changeContentFn(i)">
                    <i class="iconfont icon-caidan1"></i>
                    <p v-show="menuWidth==200">{{item}}</p>
                </li>
            </template>
        </ul>
    </div>
    <div class="main">
        <div class="top">
            <i class="iconfont icon-caidan" @click="changeMenuFn"></i>
            <span class="shouye">首页</span>
            <div v-for="item in tipObj">
                <transition 
                    appear 
                    enter-active-class="animated bounceInRight"
                >
                <template v-if="item.name==who">
                    <div style="display: inline-block;">
                        <span>&gt;{{item.one}}&gt;</span>
                        <span>{{item.two}}</span>
                    </div>
                </template>
                </transition>
            </div>
            <button @click="quanpinFn" v-if="quanpingData" class="quanping">全屏</button>
            <button @click="tuichuquanpinFn" v-if="tuichuquanping" class="quanping">退出</button>
        </div>
        <div>
            <transition  
                out-in 
                appear 
                enter-active-class="animated lightSpeedIn"
            >
                <component :is="who" class="main-content"></component>
            </transition>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./components.js"></script>
<script>
    Vue.config.productionTip = false
</script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            liObj: ['后台首页', '商品列表', '订单列表', '用户列表'],
            tipObj: [{
                    one: '主页',
                    two: '欢迎页',
                    name: 'index'
                },
                {
                    one: '商品',
                    two: '列表',
                    name: 'goods'
                },
                {
                    one: '订单',
                    two: '列表',
                    name: 'orders'
                },
                {
                    one: '用户',
                    two: '信息',
                    name: 'members'
                }
            ],
            quanpingData:true,
            tuichuquanping:false,
            menuWidth: 200,
            who: 'index',
            whoData: ['index', 'goods', 'orders', 'members']
        },
        methods: {
            changeMenuFn() {
                this.menuWidth = this.menuWidth == 200 ? 64 : 200
            },
            changeContentFn(i) {
                this.who = this.whoData[i]
            },
            quanpinFn(){
                var de = document.documentElement;
                    if (de.requestFullscreen) {
                        de.requestFullscreen();
                    } else if (de.mozRequestFullScreen) {
                        de.mozRequestFullScreen();
                    } else if (de.webkitRequestFullScreen) {
                        de.webkitRequestFullScreen();
                    }
                    this.quanpingData= false
                    this.tuichuquanping = true
            },
            tuichuquanpinFn(){
                var de = document;
                if (de.exitFullscreen) {
                        de.exitFullscreen();
                } else if (de.mozCancelFullScreen) {
                        de.mozCancelFullScreen();
                    } else if (de.webkitCancelFullScreen) {
                        de.webkitCancelFullScreen();
                    }
                    this.quanpingData= true
                    this.tuichuquanping = false
            }

        },
    })
</script>